<template>
	<view class="box-data" :style="{ height: height }">
		<image class="image" src="/static/image/common/404.png"></image>
		<view class="txt-box" v-if="desc">
			<text class="txt">{{ desc }}</text>
		</view>
		<slot></slot>
	</view>
</template>

<script>
export default {
	props: {
		desc: {
			type: String,
			default: '暂无数据'
		},
		height: {
			type: String,
			default: 'auto'
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.box-data {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background-color: #ffffff;

	.image {
		width: 299rpx;
		height: 278rpx;
		display: inline-block;
	}
	.txt-box {
		color: #bbd9fd;
		font-size: 30rpx;
		padding: 0 24rpx;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		letter-spacing: 1rpx;
		text-shadow: 2rpx 2rpx 8rpx #e4f2fe;
	}
}
</style>
